<template>
  <div ref="gaugeBox" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";

const gaugeBox = ref(null);

const myProps = defineProps({
  gaugecolor: {
    
    type: "#001432",
    required: true,
  },
  gaugedata: {
    type: Array,
    required: true,
  },
});

//声明响应式数据
let myChart = null;
let option = ref(null);

//监听数据的变化
watch(
  () => option.value,
  (newvalue, oldvalue) => {
    myChart.setOption(option.value);
  },
  {
    deep: true,
  }
);

onMounted(() => {
  myChart = echarts.init(gaugeBox.value, "dark", {
    renderer: "canvas",
    useDirtyRect: false,
  });
  var app = {};

  option.value = {
    backgroundColor: "#001432",
    series: [
      {
        type: "gauge",
        itemStyle: {
            color: myProps.gaugecolor
        },
        progress: {
          show: true,
          width: 8,    //进度圆环的宽度
        },
        axisLine: {
          lineStyle: {
            width: 8,   //进度圆环的宽度
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 0,     //拆分线长度
          lineStyle: {
            width: 0,     //拆分线宽度
            color: "#999",
          },
        },
        axisLabel: {
          distance: 3,    //拆分线标签间距
          color: "#FFF",
          fontSize: 10,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 10,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 20,
          offsetCenter: [0, "90%"],
          color: myProps.gaugecolor
        },
        data: myProps.gaugedata,
      },
    ],
  };

  if (option.value && typeof option.value === "object") {
    myChart.setOption(option.value);
  }

  window.addEventListener("resize", myChart.resize);
});
</script>

<style>
</style>